<template>
    <div class="p-6 space-y-6">
        <!-- 返回按钮 -->
        <div class="flex items-center gap-4">
            <button @click="$router.back()"
                    class="flex items-center gap-2 px-3 py-2 text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
                </svg>
                返回
            </button>
        </div>

        <!-- 插件基本信息 -->
        <div class="card">
            <div class="flex items-start gap-6">
                <!-- 插件图标 -->
                <div
                     class="w-24 h-24 bg-gradient-to-br from-blue-500 to-purple-600 rounded-xl flex items-center justify-center flex-shrink-0">
                    <svg class="w-12 h-12 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
                    </svg>
                </div>

                <!-- 插件信息 -->
                <div class="flex-1">
                    <div class="flex items-start justify-between mb-4">
                        <div>
                            <h1 class="text-3xl font-bold text-gray-800 dark:text-gray-200 mb-2">{{ plugin.name }}</h1>
                            <p class="text-lg text-gray-600 dark:text-gray-400 mb-4">{{ plugin.description }}</p>
                            <div class="flex items-center gap-4 text-sm text-gray-500 dark:text-gray-400">
                                <span>作者：{{ plugin.author }}</span>
                                <span>版本：{{ plugin.version }}</span>
                                <span>更新：{{ plugin.updateTime }}</span>
                                <span>大小：{{ plugin.size }}</span>
                            </div>
                        </div>

                        <!-- 评分和下载 -->
                        <div class="text-right">
                            <div class="flex items-center gap-1 mb-2">
                                <div class="flex">
                                    <svg v-for="i in 5" :key="i"
                                         :class="['w-5 h-5', i <= Math.floor(plugin.rating) ? 'text-yellow-400' : 'text-gray-300']"
                                         fill="currentColor" viewBox="0 0 20 20">
                                        <path
                                              d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                                    </svg>
                                </div>
                                <span class="text-lg font-semibold text-gray-800 dark:text-gray-200">{{ plugin.rating
                                    }}</span>
                            </div>
                            <p class="text-sm text-gray-500 dark:text-gray-400">{{ plugin.downloads }}次下载</p>
                        </div>
                    </div>

                    <!-- 标签 -->
                    <div class="flex items-center gap-2 mb-6">
                        <span
                              class="px-3 py-1 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 text-sm rounded-full">
                            {{ plugin.category }}
                        </span>
                        <span v-if="plugin.isFree"
                              class="px-3 py-1 bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 text-sm rounded-full">
                            免费
                        </span>
                        <span v-else
                              class="px-3 py-1 bg-orange-100 dark:bg-orange-900 text-orange-800 dark:text-orange-200 text-sm rounded-full">
                            ¥{{ plugin.price }}
                        </span>
                    </div>

                    <!-- 操作按钮 -->
                    <div class="flex items-center gap-4">
                        <button @click="installPlugin" :class="[
                            'px-6 py-3 rounded-lg font-semibold transition-colors flex items-center gap-2',
                            plugin.installed
                                ? 'bg-green-600 text-white hover:bg-green-700'
                                : 'bg-blue-600 text-white hover:bg-blue-700'
                        ]">
                            <svg v-if="!plugin.installed" class="w-5 h-5" fill="none" stroke="currentColor"
                                 viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                      d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                            </svg>
                            <svg v-else class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                      d="M5 13l4 4L19 7" />
                            </svg>
                            {{ plugin.installed ? '已安装' : '安装插件' }}
                        </button>

                        <button @click="toggleFavorite" :class="[
                            'px-4 py-3 rounded-lg border transition-colors flex items-center gap-2',
                            plugin.isFavorite
                                ? 'border-red-300 bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400'
                                : 'border-gray-300 dark:border-gray-600 text-gray-600 dark:text-gray-400 hover:border-red-300 hover:bg-red-50 dark:hover:bg-red-900/20 hover:text-red-600 dark:hover:text-red-400'
                        ]">
                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                                <path
                                      d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" />
                            </svg>
                            {{ plugin.isFavorite ? '已收藏' : '收藏' }}
                        </button>

                        <button
                                class="px-4 py-3 border border-gray-300 dark:border-gray-600 text-gray-600 dark:text-gray-400 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors flex items-center gap-2">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                      d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.367 2.684 3 3 0 00-5.367-2.684z" />
                            </svg>
                            分享
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 详细信息和截图 -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <!-- 详细信息 -->
            <div class="lg:col-span-2 space-y-6">
                <!-- 功能特性 -->
                <div class="card">
                    <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">功能特性</h3>
                    <ul class="space-y-2">
                        <li v-for="feature in plugin.features" :key="feature"
                            class="flex items-center gap-2 text-gray-600 dark:text-gray-300">
                            <svg class="w-4 h-4 text-green-500 flex-shrink-0" fill="none" stroke="currentColor"
                                 viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                      d="M5 13l4 4L19 7" />
                            </svg>
                            {{ feature }}
                        </li>
                    </ul>
                </div>

                <!-- 截图展示 -->
                <div class="card">
                    <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">截图展示</h3>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div v-for="(screenshot, index) in plugin.screenshots" :key="index"
                             class="relative group cursor-pointer">
                            <img :src="screenshot" :alt="`截图 ${index + 1}`"
                                 class="w-full h-48 object-cover rounded-lg border border-gray-200 dark:border-gray-700">
                            <div
                                 class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-50 transition-all duration-300 rounded-lg flex items-center justify-center">
                                <svg class="w-8 h-8 text-white opacity-0 group-hover:opacity-100 transition-opacity"
                                     fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                          d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7" />
                                </svg>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 更新日志 -->
                <div class="card">
                    <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">更新日志</h3>
                    <div class="space-y-4">
                        <div v-for="log in plugin.changelog" :key="log.version" class="border-l-4 border-blue-500 pl-4">
                            <div class="flex items-center justify-between mb-2">
                                <h4 class="font-semibold text-gray-800 dark:text-gray-200">v{{ log.version }}</h4>
                                <span class="text-sm text-gray-500 dark:text-gray-400">{{ log.date }}</span>
                            </div>
                            <ul class="space-y-1 text-sm text-gray-600 dark:text-gray-300">
                                <li v-for="item in log.changes" :key="item" class="flex items-start gap-2">
                                    <span class="text-blue-500 mt-1">•</span>
                                    {{ item }}
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                <!-- 用户评论 -->
                <div class="card">
                    <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">用户评论</h3>
                    <div class="space-y-4">
                        <div v-for="review in plugin.reviews" :key="review.id"
                             class="border-b border-gray-200 dark:border-gray-700 pb-4 last:border-b-0">
                            <div class="flex items-start justify-between mb-2">
                                <div class="flex items-center gap-2">
                                    <img :src="review.avatar" :alt="review.author" class="w-8 h-8 rounded-full">
                                    <span class="font-medium text-gray-800 dark:text-gray-200">{{ review.author
                                        }}</span>
                                </div>
                                <div class="flex items-center gap-1">
                                    <svg v-for="i in 5" :key="i"
                                         :class="['w-4 h-4', i <= review.rating ? 'text-yellow-400' : 'text-gray-300']"
                                         fill="currentColor" viewBox="0 0 20 20">
                                        <path
                                              d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                                    </svg>
                                </div>
                            </div>
                            <p class="text-gray-600 dark:text-gray-300 text-sm">{{ review.content }}</p>
                            <span class="text-xs text-gray-500 dark:text-gray-400">{{ review.date }}</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 侧边栏 -->
            <div class="space-y-6">
                <!-- 系统要求 -->
                <div class="card">
                    <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">系统要求</h3>
                    <div class="space-y-3">
                        <div class="flex items-center justify-between">
                            <span class="text-gray-600 dark:text-gray-400">VeloAdmin 版本</span>
                            <span class="text-gray-800 dark:text-gray-200">{{ plugin.requirements.veloAdminVersion
                                }}</span>
                        </div>
                        <div class="flex items-center justify-between">
                            <span class="text-gray-600 dark:text-gray-400">Node.js 版本</span>
                            <span class="text-gray-800 dark:text-gray-200">{{ plugin.requirements.nodeVersion }}</span>
                        </div>
                        <div class="flex items-center justify-between">
                            <span class="text-gray-600 dark:text-gray-400">浏览器支持</span>
                            <span class="text-gray-800 dark:text-gray-200">{{ plugin.requirements.browserSupport
                                }}</span>
                        </div>
                    </div>
                </div>

                <!-- 许可证 -->
                <div class="card">
                    <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">许可证</h3>
                    <div class="space-y-3">
                        <div class="flex items-center justify-between">
                            <span class="text-gray-600 dark:text-gray-400">许可证类型</span>
                            <span class="text-gray-800 dark:text-gray-200">{{ plugin.license.type }}</span>
                        </div>
                        <div class="flex items-center justify-between">
                            <span class="text-gray-600 dark:text-gray-400">有效期</span>
                            <span class="text-gray-800 dark:text-gray-200">{{ plugin.license.validity }}</span>
                        </div>
                        <a href="#" class="text-blue-600 dark:text-blue-400 text-sm hover:underline">查看完整许可证</a>
                    </div>
                </div>

                <!-- 相关插件 -->
                <div class="card">
                    <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">相关插件</h3>
                    <div class="space-y-3">
                        <div v-for="related in plugin.related" :key="related.id"
                             class="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors cursor-pointer">
                            <div
                                 class="w-10 h-10 bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg flex items-center justify-center">
                                <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                          d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
                                </svg>
                            </div>
                            <div class="flex-1">
                                <h4 class="font-medium text-gray-800 dark:text-gray-200 text-sm">{{ related.name }}</h4>
                                <p class="text-xs text-gray-500 dark:text-gray-400">{{ related.downloads }}次下载</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()

// 模拟插件详情数据
const plugin = ref({
    id: 1,
    name: 'ECharts 图表插件',
    description: '基于 ECharts 的图表组件，支持多种图表类型和交互功能，包括折线图、柱状图、饼图、散点图等，提供丰富的配置选项和主题定制功能。',
    author: 'Apache ECharts',
    version: '1.2.3',
    updateTime: '2024-01-15',
    size: '2.5MB',
    rating: 4.8,
    downloads: 2345,
    category: '图表插件',
    isFree: false,
    price: 99,
    installed: false,
    isFavorite: false,
    features: [
        '支持 20+ 种图表类型',
        '响应式设计，适配各种屏幕尺寸',
        '丰富的主题和样式定制',
        '数据动态更新和动画效果',
        '导出图片和 PDF 功能',
        'TypeScript 类型支持',
        '详细的文档和示例'
    ],
    screenshots: [
        'https://via.placeholder.com/400x300/3B82F6/FFFFFF?text=截图1',
        'https://via.placeholder.com/400x300/10B981/FFFFFF?text=截图2',
        'https://via.placeholder.com/400x300/F59E0B/FFFFFF?text=截图3',
        'https://via.placeholder.com/400x300/EF4444/FFFFFF?text=截图4'
    ],
    changelog: [
        {
            version: '1.2.3',
            date: '2024-01-15',
            changes: [
                '修复了在某些浏览器下的兼容性问题',
                '优化了大数据量图表的渲染性能',
                '新增了 3D 柱状图支持',
                '改进了主题切换功能'
            ]
        },
        {
            version: '1.2.0',
            date: '2024-01-01',
            changes: [
                '新增了雷达图和桑基图',
                '支持自定义颜色配置',
                '优化了移动端体验',
                '修复了已知的 bug'
            ]
        }
    ],
    reviews: [
        {
            id: 1,
            author: '张三',
            avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=1',
            rating: 5,
            content: '非常好用的图表插件，功能强大，文档详细，强烈推荐！',
            date: '2024-01-10'
        },
        {
            id: 2,
            author: '李四',
            avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=2',
            rating: 4,
            content: '图表类型丰富，性能也不错，就是价格稍贵。',
            date: '2024-01-08'
        }
    ],
    requirements: {
        veloAdminVersion: '>= 1.0.0',
        nodeVersion: '>= 16.0.0',
        browserSupport: 'Chrome 80+, Firefox 75+, Safari 13+'
    },
    license: {
        type: '商业许可',
        validity: '永久有效'
    },
    related: [
        { id: 2, name: '高级表格组件', downloads: 1234 },
        { id: 3, name: '文件上传组件', downloads: 987 },
        { id: 4, name: 'OAuth 认证插件', downloads: 567 }
    ]
})

onMounted(() => {
    // 根据路由参数获取插件详情
    const pluginId = route.params.id
    console.log('加载插件详情:', pluginId)
    // 这里可以调用 API 获取插件详情
})

function installPlugin() {
    plugin.value.installed = !plugin.value.installed
    // 这里可以调用 API 进行安装/卸载操作
}

function toggleFavorite() {
    plugin.value.isFavorite = !plugin.value.isFavorite
    // 这里可以调用 API 进行收藏/取消收藏操作
}
</script>